<template>
  <div class="wrapperBox">
    <div class="contentBox">
      <h3 class="title">放行原因设置</h3>
      <div class="content">
        <el-form ref="leaveReasonForm" :model="newLeaveReasonList" label-width="100px">
          <template v-for="(leaveReason,index) in leaveReasonList">
            <el-form-item :label="'类型'+(index+1)" :key="index">
              <div class="colBox">
                <el-input
                  placeholder="请填写放行类型"
                  v-model="leaveReason.reasonContent"
                  type="text"
                  disabled="disabled"
                ></el-input>
                <a href="javascript:;">
                  <el-button
                    size="small"
                    type="primary"
                    @click.stop="modal_del_open(index, leaveReason.id)"
                    class="el-icon-delete"
                  ></el-button>
                </a>
              </div>
            </el-form-item>
          </template>
          <!-- 新增列表 -->
          <template v-for="(leaveReason,index) in newLeaveReasonList.list">
            <el-form-item
              :key="index"
              :prop="'list.' + index + '.reasonContent'"
              label="新增类型"
              :rules="{ required: true, message: '请填写放行类型', trigger: 'blur' }"
            >
              <div class="colBox">
                <el-input placeholder="请填写放行类型" v-model="leaveReason.reasonContent" type="text"></el-input>
                <a href="javascript:;">
                  <el-button
                    size="small"
                    type="primary"
                    @click.stop="modal_del_open(index)"
                    class="el-icon-delete"
                  ></el-button>
                </a>
              </div>
            </el-form-item>
          </template>
          <el-form-item>
            <button class="ake_btn ake_btn_text" @click.stop="addOne()">添加类型</button>
          </el-form-item>
        </el-form>
      </div>
      <div class="btnGroups">
        <button class="ake_btn ake_btn_text" @click.stop="submitLeaveReasonForm()">保存</button>
      </div>
    </div>

    <!--确认删除吗？  modal-->
    <basic-modal ref="delConfirmTipModal" bodyTxt="确认删除吗？">
      <h3 slot="title">温馨提示</h3>
      <div class="modal-footer" slot="modal-footer">
        <button
          class="ake_btn ake_btn_text ake_btn_confirm"
          @click="deleteOne(delNo,leaveReasonId)"
        >确定</button>
        <button class="ake_btn ake_btn_text modal-close" @click="closed('delConfirmTipModal')">关闭</button>
      </div>
    </basic-modal>
  </div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";

//modal
import invokeModal from "@mixins/modal/invokeModal.js";

import api from "../../fetch/api";

export default {
  mixins: [common, stardardList, invokeModal],
  data() {
    return {
      leaveReasonList: [],
      newLeaveReasonList: {
        list: []
      },
      delNo: "",
      leaveReasonId: ""
    };
  },
  created() {
    this.newLeaveReasonList.list = [];
    this.getLeaveReasonList();
  },
  methods: {
    getLeaveReasonList() {
      let self = this;
      api.fetchGet("mobile/parkingLeaveReason/list.do", null).then(
        res => {
          self.leaveReasonList = res.data;
        },
        err => {}
      );
    },
    modal_del_open(index, id) {
      this.delNo = index;
      this.leaveReasonId = id;
      this.toOpenModal("delConfirmTipModal");
    },
    deleteOne(index, id) {
      var self = this;
      if (id) {
        api.fetchGet("mobile/parkingLeaveReason/delete.do", { id: id }).then(
          res => {
            if (res.status == 1) {
              self.getLeaveReasonList();
              self.closed("delConfirmTipModal", 1);
              return;
            } else {
              self.showToast(res.message, 2, 2000);
              return;
            }
          },
          err => {}
        );
      } else {
        self.newLeaveReasonList.list.splice(index, 1);
        self.closed("delConfirmTipModal", 1);
        return;
      }
    },
    addOne() {
      this.newLeaveReasonList.list.push({
        id: 0,
        reasonContent: ""
      });
    },
    submitLeaveReasonForm() {
      let self = this;
      if (self.newLeaveReasonList.list.length > 0) {
        this.$refs["leaveReasonForm"].validate(valid => {
          if (valid) {
            api
              .fetchPost(
                "mobile/parkingLeaveReason/batchSave.do",
                self.newLeaveReasonList.list
              )
              .then(
                res => {
                  if (res.status == 1) {
                    self.newLeaveReasonList.list = [];
                    self.getLeaveReasonList();
                    self.showToast("保存成功", 1);
                  }
                },
                err => {}
              );
          } else {
            return false;
          }
        });
      }
    }
  }
};
</script>

<style lang="less">
.router-wrapper {
  overflow: auto;
}
.wrapperBox {
  text-align: center;
  .contentBox {
    display: inline-block;
    width: 580px;
    margin-top: 30px;
    .title {
      font-size: 16px;
      color: #0c0c0c;
      letter-spacing: 0.49px;
      text-align: left;
      margin-bottom: 20px;
    }
    .content {
      background: #f7f7f7;
      border: 1px solid #cecece;
      padding: 40px 36px;
      button.ake_btn {
        float: left;
        height: 35px;
      }
      .colBox {
        display: flex;
        align-items: center;
        a {
          color: #337ab7;
          text-decoration: none;
          margin-left: 10px;
        }
      }
      .el-form-item__label {
        font-size: 14px;
        color: #333333;
        letter-spacing: 0.43px;
      }
    }
    .btnGroups {
      display: flex;
      justify-content: flex-end;
      padding: 20px 0;
      button {
        height: 35px;
        &:not(:last-child) {
          margin-right: 10px;
        }
      }
    }
  }
}
</style>